<template>
    <div class="content">
        <Form :label-width="200" :model="form" :rules="rules" ref="form">
            <FormItem label="学生账号" prop="userName">
                <Input
                    :maxlength="10"
                    placeholder="3-10位,不可重复"
                    v-model="form.userName"
                ></Input>
            </FormItem>
            <FormItem label="登录密码" prop="userPwd">
                <Input
                    :maxlength="10"
                    type="password"
                    autocomplete="new-password"
                    placeholder="请输入登录密码"
                    :disabled="!!form.userId"
                    v-model="pwd"
                ></Input>
            </FormItem>
            <FormItem label="学生姓名" prop="realName">
                <Input
                    :maxlength="10"
                    placeholder="请输入学生姓名"
                    v-model="form.realName"
                ></Input>
            </FormItem>
            <FormItem label="学生学号" prop="userNo">
                <Input
                    :maxlength="20"
                    placeholder="请输入学生学号"
                    v-model="form.userNo"
                ></Input>
            </FormItem>
            <FormItem label="联系方式" prop="contacts">
                <Input
                    placeholder="请输入学生联系方式"
                    v-model="form.contacts"
                    :maxlength="12"
                ></Input>
            </FormItem>
            <FormItem>
                <div class="submit-footer">
                    <Button type="primary" @click="submit">保存</Button>
                    <Button @click="handleCancel">取消</Button>
                </div>
            </FormItem>
        </Form>
    </div>
</template>
<script>
import { mapMutations } from 'vuex'
import { addStudent, updateStudent, queryStudentInfo } from '@/api/userManage'

export default {
    inject: ['nextPageReload'],

    props: {
        id: {
            type: String,
            default: ''
        },
        classId: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            form: {
                classId: '',
                userId: '',
                userName: '',
                realName: '',
                userPwd: '',
                contacts: '',
                userNo: ''
            },
            rules: {
                userName: [
                    { required: true, message: '请输入学生账号', trigger: 'blur' },
                    { max: 10, min: 3, message: '3-10位,不可重复', trigger: 'change,blur' }
                ],
                realName: [
                    { required: true, message: '请输入学生姓名', trigger: 'blur' },
                    { max: 10, min: 1, message: '1-10位', trigger: 'change,blur' }
                ],
                userPwd: [
                    {
                        required: true,
                        validator: (rule, value, callback) => {
                            if (this.form.userId || value) {
                                /^.{3,10}$/.test(value) ? callback() : callback(new Error('密码3-10位, 字母数字任意组合'))
                            } else {
                                callback(new Error('登录密码必填'))
                            }
                        },
                        trigger: 'blur'
                    }
                ],
                userNo: [
                    { required: true, message: '请输入学生学号', trigger: 'blur' },
                    { max: 20, min: 1, message: '1到20位，字母数字任意组合', trigger: 'change,blur' }
                ]
            }
        }
    },
    computed: {
        pwd: {
            get () {
                return this.form.userId ? '********' : this.form.userPwd
            },
            set (v) {
                if (this.form.userId) return
                this.form.userPwd = v
            }
        }
    },
    mounted () {
        const id = this.id
        id && this.queryInfo(id)
    },
    methods: {
        ...mapMutations(['removeTagNav']),
        queryInfo (id) {
            queryStudentInfo(id).then(res => {
                if (res.data.code === '0000') {
                    const form = this.form
                    const data = res.data.data
                    Object.keys(form).forEach(k => {
                        form[k] = data[k]
                    })
                } else {
                    this.$Message.error(res.data.data)
                }
            })
        },
        submit () {
            this.$refs.form.validate(v => {
                if (v) {
                    this.form.classId = this.form.classId || this.classId
                    if (!this.form.classId) {
                        this.$Message.error('班级必填！')
                        return
                    }
                    const fn = this.form.userId ? updateStudent : addStudent
                    fn(this.form).then(res => {
                        if (res.data.code === '0000') {
                            this.$Message.success('保存成功')
                            this.nextPageReload()
                            this.handleCancel()
                        } else {
                            this.$Message.error(res.data.data || res.data.msg)
                        }
                    })
                }
            })
        },
        handleCancel () {
            this.removeTagNav(this.$route)
            this.$router.replace({
                name: 'stuManageList'
            })
        }
    }
}
</script>
<style lang="less" scoped>
.ivu-form {
    max-width: 800px;
}
</style>
